<template>
  <div>
    <div class="search_form">
        <div>
          <el-select
				  	size="mini"
				  	clearable
				  	placeholder="请选择子过程"
				  	v-model="searchFrom.processCode"
				  	class="others"
				  	popper-class="selectClass"
				  >
					  <el-option v-for="(item, index) in processList" :key="index" :label="item.processName" :value="item.processCode"></el-option>
				  </el-select>
          <el-select
				  	size="mini"
				  	clearable
				  	placeholder="请选择机械种类"
				  	v-model="searchFrom.equipmentTypeName"
				  	class="others"
				  	popper-class="selectClass"
				  >
					  <el-option v-for="(item, index) in machineList" :key="index" :label="item.equipmentTypeName" :value="item.equipmentTypeName"></el-option>
				  </el-select>
          <el-select
				  	size="mini"
				  	clearable
				  	placeholder="请选择货主"
            filterable
				  	v-model="searchFrom.cargoOwnerId"
				  	class="others"
				  	popper-class="selectClass"
				  >
					  <el-option v-for="(item, index) in customerList" :key="index" :label="item.customerName" :value="item.customerId"></el-option>
				  </el-select>
          <el-select
				  	size="mini"
				  	clearable
				  	placeholder="请选择货代"
            filterable
				  	v-model="searchFrom.cargoAgentId"
				  	class="others"
				  	popper-class="selectClass"
				  >
					  <el-option v-for="(item, index) in customerList" :key="index" :label="item.customerName" :value="item.customerId"></el-option>
				  </el-select>
          <el-input v-model="searchFrom.createName" size="mini" placeholder="请输入理货员" clearable class="others" popper-class="selectClass"></el-input>
				  <el-button @click="searchData" class="search_btn" type="primary" icon="el-icon-search" size="mini">
					  查询
				  </el-button>
        </div>
      </div>
      <div>
        <BaseTable 
          :loading="tloading"
          :data="tallytableData"
          :columns="tallycolumns" 
          :tableHeight="tableHeight" 
          :pagination="queryall"
          @size-change="sizeChange" 
          @current-change="pageChange"></BaseTable>
      </div>
      <div class="demo-drawer__footer">
      <el-button type="primary" size="mini">关闭</el-button>
    </div>
  </div>
</template>
<script>
import BaseTable from '@/components/BaseTable'
import api from '@/api/yardTally/singTicket/index'
import publicapi from "@/api/public"
export default {
  components: { BaseTable },
  props: {
    workLineInfo: {
      type: Object
    }
  },
  data () {
    return {
      // 理货查询条件
      searchFrom: {
        processCode: '',
        equipmentTypeName: '',
        createName: '',
        cargoOwnerId: '',
        cargoAgentId: '',
      },
      processList: [], // 子过程下拉框接口
      tloading: false, // 理货记录loading
      tallytableData: [], // 理货记录
      tallycolumns: [
        {
          prop: 'processName',
          label: '子过程'
        },
        {
          prop:'equipmentNo',
          label: '作业机械'
        },
        {
          prop:'transportEquipmentNo',
          label: '转运机械'
        },
        {
          prop:'cargoOwnerName',
          label: '货主',
          isShort: true
        },
        {
          prop:'cargoAgentName',
          label: '货代',
          isShort: true
        },
        {
          prop:'cargoName',
          label: '货名',
        },
        {
          prop:'storehouse',
          label: '场地',
          width: 250
        },
        {
          prop:'quantity',
          label: '件数'
        },
        {
          prop:'ton',
          label: '吨数'
        },
        {
          prop:'createName',
          label: '理货员'
        },
        {
          prop:'createTime',
          label: '理货时间'
        },
        {
          prop:'picture',
          label: '照片'
        }
      ],
      tableHeight: window.innerHeight - 210,
      machineList: [],
      // 页码
      queryall: {
        totalNum: 0,
        startpage: 1,
        pagesize: 15
      },
      customerList: [],
    }
  },
  created () {
    this.seachProcess()
    this.searchData()
    this.getMachine()
    this.getlistCustomer()
  },
  methods: {
    // 查询子过程
    seachProcess () {
      api.selectProcess(this.workLineInfo.processCode).then(res => {
        this.processList = res.data.data
      })
    },
    // 查询机械种类
    getMachine () {
      api.selectEquipmentTypeName(this.workLineInfo.id).then(res => {
        this.machineList = res.data.data
      })
    },
    // 查询货主货代
    getlistCustomer () {
      publicapi.getlistCustomer().then(res => {
        this.customerList = res.data.data
      })
    },
    // 分页查询
    sizeChange(val) {
      this.queryall.pagesize = val;
      this.searchData();
    },
    // 分页查询
    pageChange(val) {
      this.queryall.startpage = val;
      this.searchData();
    },
    // 查询主列表
    searchData () {
      let param = {
        planId: this.workLineInfo.id,
        processCode: this.searchFrom.processCode,
        equipmentTypeName: this.searchFrom.equipmentTypeName,
        createName: this.searchFrom.createName,
        cargoAgentId: this.searchFrom.cargoAgentId,
        cargoOwnerId: this.searchFrom.cargoOwnerId
      }
      let params = Object.assign({},param,this.queryall)
      this.tloading = true
      api.selectTYardTicket(params).then(res => {
        this.tloading = false
        this.tallytableData = res.data.data.pages
        this.queryall.startpage = res.data.data.pageNum // 当前页
        this.queryall.pagesize = res.data.data.pageSize // 每页多少
        this.queryall.totalNum = res.data.data.totalNum
      })
    },
  }
}
</script>
<style lang="less" scoped>
@import "../../../../assets/searchfrom.less";
</style>